<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useDrag } from '@vueuse/gesture'
import { ElMessage } from 'element-plus'
const options1 = [
  {
    value: '1',
    label: '人事部经理',
  },
  {
    value: 'Option2',
    label: '财务部经理',
  },
  {
    value: 'Option3',
    label: '副总经理',
  },
  {
    value: 'Option4',
    label: '董事长',
  },
  {
    value: 'Option5',
    label: '总监',
  },
  {
    value: 'Option6',
    label: '一级组长',
  },
]
const options2 = [
  {
    value: '1',
    label: '不限',
  },
  {
    value: 'Option2',
    label: '李四',
  },
  {
    value: 'Option3',
    label: '王五',
  },
  {
    value: 'Option4',
    label: '张强',
  },
  {
    value: 'Option5',
    label: '刘薇',
  },
]
const props = defineProps({
  initialData: {
    type: Object,
    default: () => ({
      nodes: [
        { id: 'node1', label: '部门审批',job: '',name: '', x: 100, y: 50 },
        { id: 'node2', label: '部门审批',job: '',name: '', x: 300, y: 50 }
      ],
      edges: []
    })
  }
})

const nodes = reactive([...props.initialData.nodes])
const edges = reactive([...props.initialData.edges])
const selectedNode = ref(null)

// 拖拽指令
const vDrag = {
  mounted(el, binding) {
    useDrag(el, ({ movement: [mx, my] }) => {
      const node = binding.value
      node.x += mx
      node.y += my
    })
  }
}

onMounted(() => {
  ElMessage.success('设计器已加载')
})
</script>

<template>
  <div class="designer-container">
    <div class="canvas">
      <div
          v-for="node in nodes"
          v-drag="node"
          :key="node.id"
          class="flow-node"
          :style="{
          top: node.y + 'px',
          left: node.x + 'px'
        }"
          @click="selectedNode = node"
      >
        {{ node.label }}
      </div>
    </div>

    <div v-if="selectedNode" class="property-panel">
      <el-form label-width="80px">
        <el-form-item label="节点名称">
          <el-input v-model="selectedNode.label" />
        </el-form-item>
        <el-form-item label="选择审批职务">
        <el-select
            v-model="selectedNode.job"
            placeholder="审批职务"
            size="large"
            style="width: 240px;margin-left: 10px"
        >
          <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
        </el-form-item>
        <el-form-item label="选择审批人">
        <el-select
            v-model="selectedNode.name"
            placeholder="审批人"
            size="large"
            style="width: 240px"
        >
          <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>

        </el-form-item>
        <el-form-item label="X坐标">
          <el-input-number v-model="selectedNode.x" />
        </el-form-item>
        <el-form-item label="Y坐标">
          <el-input-number v-model="selectedNode.y" />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.designer-container {
  display: flex;
  height: 600px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
}

.canvas {
  flex: 1;
  background: #f8f9fa;
  position: relative;
  overflow: auto;
}

.property-panel {
  width: 300px;
  background: #fff;
  border-left: 1px solid #ebeef5;
  padding: 20px;
  box-shadow: -2px 0 8px rgba(0,0,0,0.05);
}

.flow-node {
  position: absolute;
  padding: 12px 20px;
  background: #fff;
  border: 2px solid #409EFF;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  cursor: grab;
  transition: transform 0.2s;
  user-select: none;
}

.flow-node:hover {
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.flow-node:active {
  cursor: grabbing;
  transform: scale(1.05);
}
</style>